<template>
  <div class="notice-container">
    <div class="bgs">
      <div v-for="(item, idx) in 4" :class="'bg bg'+idx"></div>
    </div>
    <div class="notice-main">
      <div class="notice-introduce yh-layout-box">
        <div class="notice-left">
          <div class="notice-jy">
            <div class="introduce-item" v-for="(item, idx) in jy">
              <div class="item-num">
                {{ idx+1 }}
              </div>
              <div class="item-info">
                <h3>{{item.title}}</h3>
                <p>
                  {{item.content}}
                </p>
              </div>
            </div>
          </div>
          <img src="@/assets/images/activity/topics/notice/left.png">
        </div>
        <div class="notice-center">
          <img src="@/assets/images/activity/topics/notice/center.png">
        </div>
        <div class="notice-right">
          <div class="notice-jy">
            <div class="introduce-item" v-for="(item, idx) in tg">
              <div class="item-num">
                {{ idx+1 }}
              </div>
              <div class="item-info">
                <h3>{{item.title}}</h3>
                <p>
                  {{item.content}}
                </p>
              </div>
            </div>
          </div>
          <img src="@/assets/images/activity/topics/notice/right.png">
        </div>

      </div>
      <div class="notice-title">
        <p class="p1">账号体系暂未打通 </p>
        <p class="p2">交易版用户和推广版用户不能相互登录</p>
      </div>

      <div class="notice-group">
        <div class="group-left">
          <img src="@/assets/images/activity/topics/notice/jy.png">
        </div>
        <div class="group-right">
          <img src="@/assets/images/activity/topics/notice/tg.png">
        </div>
      </div>
    </div>
    <div class="foot">
      Youboy 粤B2-20120239 粤ICP备09180448号-1 粤公网安备44060402000131号
    </div>
  </div>
</template>

<script>

export default {
  name: 'ActivityNotice',
  components: {

  },
  data() {
    return {
      isMoving: false,
      jy: [{
        title: '旺铺搭建',
        content: 'APP/小程序/H5商城/PC商城开店，多终端、全渠道店铺系统',
      },{
        title: '店铺/商品维护管理',
        content: '自带光芒旺铺的装修模板，商品支持在线交易',
      },{
        title: '渠道曝光',
        content: '全渠道的推广曝光，赠送首页/二级页面广告位置、优先享有 站外推广大礼包',
      },{
        title: '运营服务',
        content: '全面的开店指导、店铺维护、分销体系搭建、客服服务、店 铺诊断等一体化的运营服务支撑',
      },{
        title: '订单保障',
        content: '平台承诺订单成交保障，1年保障50万交易，若无法达成， 第二年免费续约',
      },{
        title: '服务期限',
        content: '限时优惠，升级到终身VIP可享终身免费',
      }],
      tg: [{
        title: '旺铺搭建',
        content: 'PC端商城开店，开启企业PC端店铺管理系统',
      },{
        title: '店铺/商品维护管理',
        content: 'PC端店铺装修模板，商品不支持在线交易，满足企业基本推 广需求',
      },{
        title: '渠道曝光',
        content: '指定站内搜索广告曝光&站外搜索引擎曝光',
      },{
        title: '运营服务',
        content: '协助处理店铺管理及商品发布等基础运营服务支撑',
      },{
        title: '订单保障',
        content: '无订单成交保障，以推广效果为主',
      },{
        title: '服务期限',
        content: '有效服务期限内享受平台服务',
      }],
    }
  },
  created() {

  },
}
</script>

<style lang="scss" scoped>
.notice-container{
  position: relative;
  .bgs{
      overflow: hidden;
      min-width: 1200px;
      position: absolute;
      left: 0;
      z-index: 1;
      height: 2360px;
      width: 100%;
      text-align: center;
      div.bg{
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 536px;
      }
      .bg0{
          background-image: url('../../../assets/images/activity/topics/notice/1.png');
      }
      .bg1{
          background-image: url('../../../assets/images/activity/topics/notice/2.png');
      }
      .bg2{
          background-image: url('../../../assets/images/activity/topics/notice/3.png');
      }
      div.bg3{
          background-image: url('../../../assets/images/activity/topics/notice/4.jpg');
          height: 752px;
      }
    }

    .notice-main{
      height: 2360px;
      position: relative;
      z-index: 3;
      overflow: hidden;

      .notice-introduce{
        width: 1220px;
        overflow: hidden;
        height: 890px;
        margin-top: 720px;
        .notice-left{
          width: 557px;
          float: left;
          height: 890px;
          position: relative;
          color: #fff;
        }
        .notice-center{
          width: 98px;
          float: left;
          margin-top: 470px;
          margin-right: 10px;
        }
        .notice-right{
          width: 552px;
          float: right;
          height: 890px;
          position: relative;
        }
        .notice-jy{
          position: absolute;
          top: 170px;
          left: 45px;
          width: 460px;
        }
        .introduce-item{
          overflow: hidden;
          height: 120px;
        }
        .item-num{
          width: 30px;
          float: left;
          color: #fff;
          font-size: 32px;
          margin-top: -4px;
          font-style: oblique;
        }
        .item-info{
          width: 430px;
          float: left;
          h3{
            font-size: 24px;
            margin: 0;
            color: #fff;
            font-weight: 500;
          }
          p{
            color: #FFFD32;
            font-size: 16px;
            line-height: 28px;
            margin-top: 10px;
          }
        }

      }

      .notice-left{
        .item-num{
          text-shadow: 0 0 18px #EB1196;
        }
         .item-info h3{
           text-shadow: 0 0 18px #EB1196;
        }
      }

      .notice-right{
         .item-info p{
          color: #fff;
        }
      }
      .notice-title{
        margin-top: 62px;
        color: #FFFD32;
        text-align: center;
        font-size: 36px;
        overflow: hidden;
        text-shadow: 0 0 6px #333;
        width: 100%;
        p{
          padding: 0;
          margin: 0;
          margin-bottom: 15px;
        }
        .p2{
          font-size: 30px;
        }
      }
      .notice-group{
        width: 1220px;
        margin: 0 auto;
        overflow: hidden;
        .group-left{
          float: left;
        }
        .group-right{
          float: right;
        }
      }
    }
    .foot{
      background-color: #4B3ED8;
      color: #DDDDDD;
      line-height: 50px;
      position: relative;
      z-index: 3;
      text-align: center;
    }
}
</style>
